---
breakpoint: tablet
title: Spacing
path: /native/spacing/
---

# Spacing

Bumbag uses two types of scales for its spacing system: the **8px major scale** and the **4px minor scale**.

You can either use the scales **directly**, or use a **pre-defined set** of scales (e.g. `sm`, `md`, `lg`).

## Using the scales directly

### The 8px major scale (recommended)

The **8px major scale** is most commonly used for positional spacing. Like **margins & paddings** between components on a layout.

Bumbag also exports a utility function called `space` to help you with calculating the scale values.

> Note: It is recommended to try stick to the 8px scale unless you need more precision. In that case, use the **4px minor scale**.

<Table>
  <TableHead>
    <TableRow>
      <TableHeadCell>Token</TableHeadCell>
      <TableHeadCell>px</TableHeadCell>
      <TableHeadCell>rem</TableHeadCell>
      <TableHeadCell>Utility function</TableHeadCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell><Code>major-1</Code></TableCell>
      <TableCell>8px</TableCell>
      <TableCell>0.5rem</TableCell>
      <TableCell><Code>space(1, 'major')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>major-2</Code></TableCell>
      <TableCell>16px</TableCell>
      <TableCell>1rem</TableCell>
      <TableCell><Code>space(2, 'major')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>major-3</Code></TableCell>
      <TableCell>24px</TableCell>
      <TableCell>1.5rem</TableCell>
      <TableCell><Code>space(3, 'major')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>major-4</Code></TableCell>
      <TableCell>32px</TableCell>
      <TableCell>2rem</TableCell>
      <TableCell><Code>space(4, 'major')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>major-5</Code></TableCell>
      <TableCell>40px</TableCell>
      <TableCell>2.5rem</TableCell>
      <TableCell><Code>space(5, 'major')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>major-n</Code></TableCell>
      <TableCell>...</TableCell>
      <TableCell>...</TableCell>
      <TableCell><Code>space(n, 'major')</Code></TableCell>
    </TableRow>
  </TableBody>
</Table>

#### With style props

```jsx-live
<FieldStack spacing="major-1">
  <FieldStack orientation="horizontal" spacing="major-2">
    <InputField label="First name" />
    <InputField label="Last name" />
  </FieldStack>
  <Button palette="primary">Save</Button>
</FieldStack>
```

#### With `applyTheme`

```jsx
import { Button, applyTheme } from 'bumbag-native';

const SaveButton = applyTheme(Button, {
  styles: {
    base: {
      marginTop: 'major-2'
    }
  }
});

<SaveButton>Save</SaveButton>
```

### The 4px minor scale

The **4px minor scale** is most commonly used for precise spacing (**margins & paddings**) of atomic components (e.g. the inner padding of a checkbox).

<Table>
  <TableHead>
    <TableRow>
      <TableHeadCell>Token</TableHeadCell>
      <TableHeadCell>px</TableHeadCell>
      <TableHeadCell>rem</TableHeadCell>
      <TableHeadCell>Utility</TableHeadCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell><Code>minor-1</Code></TableCell>
      <TableCell>4px</TableCell>
      <TableCell>0.25rem</TableCell>
      <TableCell><Code>space(1, 'minor')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>minor-2</Code></TableCell>
      <TableCell>8px</TableCell>
      <TableCell>0.5rem</TableCell>
      <TableCell><Code>space(2, 'minor')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>minor-3</Code></TableCell>
      <TableCell>12px</TableCell>
      <TableCell>0.75rem</TableCell>
      <TableCell><Code>space(3, 'minor')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>minor-4</Code></TableCell>
      <TableCell>16px</TableCell>
      <TableCell>1rem</TableCell>
      <TableCell><Code>space(4, 'minor')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>minor-5</Code></TableCell>
      <TableCell>20px</TableCell>
      <TableCell>1.25rem</TableCell>
      <TableCell><Code>space(5, 'minor')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>minor-n</Code></TableCell>
      <TableCell>...</TableCell>
      <TableCell>...</TableCell>
      <TableCell><Code>space(n, 'minor')</Code></TableCell>
    </TableRow>
  </TableBody>
</Table>

#### With style props

```jsx-live
<Box
  backgroundColor="primaryTint"
  paddingX="minor-2"
  paddingY="minor-5"
>
  Hello world
</Box>
```

#### With `applyTheme`

```jsx
import { Button, applyTheme } from 'bumbag-native';

const SaveButton = applyTheme(Button, {
  styles: {
    base: {
      padding: 'major-2'
    }
  }
});

<SaveButton>Save</SaveButton>
```

## Using a pre-defined set

Bumbag has the ability for you to specify your own pre-defined set of spacings. Pre-defined spacings can be used when you want to restrict the user to a set of sizes.

Bumbag has the following pre-defined attributes set by default:

<Table>
  <TableHead>
    <TableRow>
      <TableHeadCell>Token</TableHeadCell>
      <TableHeadCell>Size</TableHeadCell>
      <TableHeadCell>Value</TableHeadCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell><Code>xs</Code></TableCell>
      <TableCell>
        <Box backgroundColor="primary" height="10px" width="0px" paddingRight="xs" />
        <Box fontSize="100" marginTop="minor-1">8px - 0.5rem</Box>
      </TableCell>
      <TableCell><Code>space(1, 'major')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>sm</Code></TableCell>
      <TableCell>
        <Box backgroundColor="primary" height="10px" width="0px" paddingRight="sm" />
        <Box fontSize="100" marginTop="minor-1">16px - 1rem</Box>
      </TableCell>
      <TableCell><Code>space(2, 'major')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>md</Code></TableCell>
      <TableCell>
        <Box backgroundColor="primary" height="10px" width="0px" paddingRight="md" />
        <Box fontSize="100" marginTop="minor-1">32px - 2rem</Box>
      </TableCell>
      <TableCell><Code>space(4, 'major')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>lg</Code></TableCell>
      <TableCell>
        <Box backgroundColor="primary" height="10px" width="0px" paddingRight="lg" />
        <Box fontSize="100" marginTop="minor-1">48px - 3rem</Box>
      </TableCell>
      <TableCell><Code>space(6, 'major')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>xl</Code></TableCell>
      <TableCell>
        <Box backgroundColor="primary" height="10px" width="0px" paddingRight="xl" />
        <Box fontSize="100" marginTop="minor-1">64px - 4rem</Box>
      </TableCell>
      <TableCell><Code>space(8, 'major')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>2xl</Code></TableCell>
      <TableCell>
        <Box backgroundColor="primary" height="10px" width="0px" paddingRight="2xl" />
        <Box fontSize="100" marginTop="minor-1">96px - 6rem</Box>
      </TableCell>
      <TableCell><Code>space(12, 'major')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>3xl</Code></TableCell>
      <TableCell>
        <Box backgroundColor="primary" height="10px" width="0px" paddingRight="3xl" />
        <Box fontSize="100" marginTop="minor-1">128px - 8rem</Box>
      </TableCell>
      <TableCell><Code>space(16, 'major')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>4xl</Code></TableCell>
      <TableCell>
        <Box backgroundColor="primary" height="10px" width="0px" paddingRight="4xl" />
        <Box fontSize="100" marginTop="minor-1">160px - 10rem</Box>
      </TableCell>
      <TableCell><Code>space(20, 'major')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>5xl</Code></TableCell>
      <TableCell>
        <Box backgroundColor="primary" height="10px" width="0px" paddingRight="5xl" />
        <Box fontSize="100" marginTop="minor-1">192px - 12rem</Box>
      </TableCell>
      <TableCell><Code>space(24, 'major')</Code></TableCell>
    </TableRow>
    <TableRow>
      <TableCell><Code>6xl</Code></TableCell>
      <TableCell>
        <Box backgroundColor="primary" height="10px" width="0px" paddingRight="6xl" />
        <Box fontSize="100" marginTop="minor-1">224px - 14rem</Box>
      </TableCell>
      <TableCell><Code>space(28, 'major')</Code></TableCell>
    </TableRow>
  </TableBody>
</Table>

#### With style props

```jsx-live
<Box
  backgroundColor="primaryTint"
  paddingX="xl"
  paddingY="md"
>
  Hello world
</Box>
```

#### With `applyTheme`

```jsx
import { Button, applyTheme } from 'bumbag-native';

const SaveButton = applyTheme(Button, {
  styles: {
    base: {
      padding: 'xl'
    }
  }
});

<SaveButton>Save</SaveButton>
```

## Theming

### Schema

```jsx
{
  spacing: {
    minorUnit: number // default = 4,
    majorUnit: number // default = 8,

    // Plus your own pre-defined set...
    [key: string]: number
    // e.g. sm: space(2, 'major')
  }
}
```
